{% extends 'base.twig' %}
 {% block style %}
     <link href="template/plugins/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
     <script src="template/plugins/fileinput/js/fileinput.js" type="text/javascript"></script>
     <!--简体中文-->
     <script src="template/plugins/fileinput/js/locales/zh.js" type="text/javascript"></script>
     <style>
         .photos{
             position: relative;
             width: 200px;
             height: 200px;
             float: left;
         }
         .photos i{position: absolute;
             top:-5px; right:0;cursor: pointer;}
         .photos img{width: 200px;height: 200px; padding: 5px}
         #star{overflow:hidden; padding: 0}
         #star li{float:left; width:20px; height:20px; margin:2px; display:inline; color:#999; font:bold 18px arial; cursor:pointer}
         #star .act{color:#c00}
     </style>
 {% endblock %}
{% block content %}
    <section id="main-content">
        <section class="wrapper">
            <div class="row mt">
                <div class="col-lg-12">
                    <div class="form-panel">
                        <h4 class="mb text-info">
                            {% if  product_id %}
                                <i class="fa fa-edit"></i> 编辑
                            {% else %}
                                <i class="fa fa-plus"></i> 新增评论
                            {% endif %}
                            <button class="text-right btn btn-success pull-right"  {% if readonly is null %} onclick="$('#form').submit();" {% endif  %} ><i class="fa fa-save"></i> 保 存 </button>
                        </h4>
                        {% if error %}
                            
                            {% for e in error %}
                                <p class="text-danger bg-warning text-center" style="padding: 5px 0"> ** {{ e.title }} **</p>
                            {% endfor %}
                        
                        {% endif %}
                        
                        <form id='form' name="form" class="form-horizontal style-form" method="post" enctype="multipart/form-data" action="comment.php">
                            <input type="hidden" name="comment_id" value="{{ comment_id }}" >
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" > 产品  </label>
                                <div class="col-sm-4">
                                    <input type='text' class="form-control" readonly name='title' value="{{title}}" required>
                                    <input type="hidden" name="product_id" value="{{product_id}}">
                                </div>
                                <div class="col-sm-1">
                                <button class="btn btn-info selectProduct" type='button'> 选择产品 </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" > 是否匿名 </label>
                                <div class="col-sm-10">
                                   <input type="checkbox" name="is_anonymous" value="1" {% if is_anonymous ==1 %} checked {% endif %}>  匿名
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" > 用户名 </label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="name" value="{{ name }}" required>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" > 星级 </label>
                                <div class="col-sm-10">
                                    <input type="hidden" name="star" id="comment_star" value="{{ star }}">
                                    <ul id="star">
                                        <li {% if star >=1 %} class="act" {% endif %}>★</li>
                                        <li {% if star >=2 %} class="act" {% endif %}>★</li>
                                        <li {% if star >=3 %} class="act" {% endif %}>★</li>
                                        <li {% if star >= 4 %} class="act" {% endif %}>★</li>
                                        <li {% if star >=5 %} class="act" {% endif %}>★</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" >评价内容 </label>
                                <div class="col-sm-10">
                                   <textarea name="content"  class='form-control' style="height: 100px;">{{ content }}</textarea>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" > 晒图 </label>
                                <div class="col-sm-10">
                                    {% if thumbs %}
                                        {% for p in thumbs %}
                                            <div class="photos">
                                                <img src="{{ p.thumb |replace({"img.stosz.com":"imgcn.stosz.com"}) }}">
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 text-center" >  </label>
                                <div class="col-sm-10 file-photos">
                                    <input id="file-photos" class="file" type="file"  name="upfile" accept="image/*"  multiple>
                                </div>
                            </div>
                            <input type="hidden" name="act" value="save">
                        </form>
                    </div>
                
                </div>
            </div>
        </section>
    </section>
    <script src="template/plugins/dialog/dist/dialog-plus.js?12"></script>
    <script type="text/javascript">
         highlight_subnav('comment.php?');
        $(document).ready(function()
        {
            var star = document.getElementById("star");
            var star_li = star.getElementsByTagName("li");
            var result = document.getElementById("comment_star");
            var resultValue =  "{{ star -1 }}" || 0;
            var i=0;
            var len = star_li.length;

            for(i=0; i<len; i++){
                star_li[i].index = i;

                star_li[i].onmouseover = function(){
                   
                    for(i=0; i<=this.index; i++){
                        star_li[i].className = "act";
                    }
                }

                star_li[i].onmouseout = function(){
                        for(i=0; i<len; i++){
                            star_li[i].className = "";
                        }
                        if(resultValue >=0)
                        {
                            for(i=0; i<= resultValue; i++){
                                star_li[i].className = "act";
                            }
                        }
                }

                star_li[i].onclick = function(){
                    for(i=0; i<=this.index; i++){
                        star_li[i].className = "act";
                    }
                    resultValue =   this.index;
                    result.value = (resultValue+1);
                }
            }

        }) ;
        $('#file-photos').fileinput({
            language: 'zh',
            allowedFileExtensions : ['jpg', 'png','gif'],
            showCaption: false,
            showUpload:false,
            uploadUrl: 'qiniu_um.php?type=comment',
        }).on("filebatchselected", function(event, files) {
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data , previewId, index) {
            $('.kv-file-remove').hide() ; 
            $('.kv-file-zoom').hide() ; 
            res = data.response ;
            if(res.state=="SUCCESS")
            {
                var str = '<input  type="hidden"  name="photos[]"  class="photos_img"  value="'+res.url+'">' ;
                $(".file-photos").append(str);
                return true ;
            }
            alert('上传失败') ;
            return false ;
        }).on('filecleared', function(event,  key) { 
             $('.photos_img').remove() ;
        });
        $("input[name='is_anonymous']").click(function()
        {
            if($(this).attr('checked') =='checked')
            {
                  $("input[name='name']").attr('readonly',true);
            }
            else{
                $("input[name='name']").attr('readonly',false);
            }
        })

         $('.selectProduct').click(function(){
                var obj=$(this);
                var _url= "product.php?act=publicProduct";
                dialog({
                    id:'_selectGoods_',
                    title:'选择商品',
                    url:_url,
                    width:1000,
                    height:800,
                    data:obj
                }).showModal();
            });
            
            function setGoodsOne(_arr,_data){
            
                var _id = _arr['_id'];
                var _title = _arr['_title'];
                $("input[name='title']").val(_title);
                $("input[name='product_id']").val(_id);
                dialog.get('_selectGoods_').close();
            }
        
    </script>
{% endblock %}